<template>
    <div>
        <van-nav-bar title="身份认证" left-arrow @click-left="goBack"></van-nav-bar>
        <div class="msgNow">
            <div>国籍</div>
            <div>{{personMsg.countryChineseName}}</div>
        </div>
        <div class="msgNow">
            <div>姓名</div>
            <div>{{personMsg.name}}</div>
        </div>
        <div class="msgNow">
            <div>证件类型</div>
            <div>{{cardType}}</div>
        </div>
        <div class="msgNow">
            <div>证件号码</div>
            <div>{{personMsg.cardNum}}</div>
        </div>
        <div class="msgNow" style="border-bottom:0">
            <div>证件照片</div>
            <div></div>
        </div>
        <div class="pic">
            <div>
                <div>
                    <img :src="personMsg.idCardImgUrlList[0].img_url" alt="">
                </div>
                <p>证件正面照</p>       
            </div>
            <div>
                <div>
                    <img :src="personMsg.idCardImgUrlList[1].img_url" alt="">
                </div>
                <p>证件反面照</p>       
            </div>
            <div>
                <div>
                    <img :src="personMsg.idCardImgUrlList[2].img_url" alt="">
                </div>
                <p>本人手持证件照</p>       
            </div>
        </div>
        <!-- <div class="msgNow" style="border-top:1px solid #eee">
            <div>出生日期</div>
            <div>{{personMsg.birthDate}}</div>
        </div> -->
    </div>
</template>
<script>
import { NavBar } from "vant";
import axios from "axios";
import { lookIdCardInfo } from "../../../axios/api.js";
export default {
   data(){
       return{
           personMsg:'',
           cate:['身份证','护照','驾照'],
           cardType:''
       }
   }, 
   components: {
    [NavBar.name]: NavBar
  },
  created(){
      this.getPersonMsg();
  },
   methods:{
       //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    //获取身份信息
    getPersonMsg(){
          console.log(this.$store.state.renzId,8888)
        lookIdCardInfo({
            params:{
                idCardId:localStorage.getItem('cardId')
            }
        }).then(res => {
            console.log(res.data)
            this.personMsg = res.data.data;
            console.log(this.personMsg);
            for(var i=0 ;i<this.cate.length;i++){
                if(i==res.data.data.credentialsType){
                    this.cardType = this.cate[i]
                    console.log(this.cate[i])
                }
            }

        })
        // console.log(this.$store.state.renzId,8888)
        // var bs = this.$store.state.renzId;
        // $.ajax({
		// 	type: "get",
		// 	cache: false,
		// 	traditional: true,
		// 	dataType: "json",
		// 	url: 'http://172.16.0.9:8080/idCard/lookIdCardInfo',
		// 	xhrFields: {
		// 		withCredentials: true
		// 	},
		// 	crossDomain: true,
		// 	data: {
        //         idCardId:bs
		// 	},
		// 	success: function(data) {
        //         console.log(data);
            
        //     }
		// });
    }
   }
}


</script>
<style lang="less" scoped>
.tabbars{
    display: none;
}
.msgNow{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    div:nth-child(1){
        width: 30%;
        text-align: left;
        padding-left: 20px;
        box-sizing: border-box;
    }
    div:nth-child(2){
        width: 70%;
        color:#666;
        text-align: left;
        padding-left: 20px;
        box-sizing: border-box;
    }
}
.pic{
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 14px;
    color: #666;
    div{
        width: 40%;
         margin-right: 20px;
         margin-bottom: 10px;
        >div{
            width: 100%;
            height: 85px;
            border: 1px solid #eee;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
            img{
                width: 100%;
            }
        }
    }
}

</style>

